@import '../style/theme/color';
@import '../style/theme/variables';
@import '../style/mixins/index';

:host.devui-popover {
  position: absolute;
  top: 0;
  left: 0;
  color: $dark1;
  line-height: 1em;
  background: $white;
  border: none;
  border-radius: 2px;
  z-index: 1060;

  > .arrow {
    border-width: 8px;
    &, &::after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }
    
    &::after {
      content: "";
    }
  }

  &.top > .arrow {
    left: 50%;
    margin-left: -7px;
    border-bottom-width: 0;
    border-top-color: $white;
    bottom: -8px;
  }

  &.right > .arrow {
    top: 50%;
    left: -8px;
    margin-top: -8px;
    border-left-width: 0;
    border-right-color: $white;
  }

  &.bottom > .arrow {
    left: 50%;
    margin-left: -7px;
    border-top-width: 0;
    border-bottom-color: $white;
    top: -8px;
  }

  &.left > .arrow {
    top: 50%;
    right: -8px;
    margin-top: -8px;
    border-right-width: 0;
    border-left-color: $white;
  }

  &.top {
    margin-top: -10px;
    box-shadow: -5px 5px 20px 0px rgba($dark1, .2);

    &.devui-popover- {
      &success > .arrow {
        border-top-color: $status-green;
      }

      &error > .arrow {
        border-top-color: $status-red;
      }

      &warning > .arrow {
        border-top-color: $status-yellow;
      }

      &default > .arrow {
        border-top-color: $dropdown-overlay;
      }

      &info > .arrow {
        border-top-color: $status-blue;
      }
    }
  }

  &.bottom {
    margin-top: 10px;
    box-shadow: 5px -5px 20px 0px rgba($dark1, .2);

    &.devui-popover- {
      &success > .arrow {
        border-bottom-color: $status-green;
      }

      &error > .arrow {
        border-bottom-color: $status-red;
      }

      &warning > .arrow {
        border-bottom-color: $status-yellow;
      }

      &default > .arrow {
        border-bottom-color: $dropdown-overlay;
      }

      &info > .arrow {
        border-bottom-color: $status-blue;
      }
    }
  }

  &.left {
    margin-left: -10px;
    box-shadow: 5px -5px 20px 0px rgba($dark1, .2);

    &.devui-popover- {
      &success > .arrow {
        border-left-color: $status-green;
      }

      &error > .arrow {
        border-left-color: $status-red;
      }

      &warning > .arrow {
        border-left-color: $status-yellow;
      }

      &default > .arrow {
        border-left-color: $dropdown-overlay;
      }

      &info > .arrow {
        border-left-color: $status-blue;
      }
    }
  }

  &.right {
    margin-left: 10px;
    box-shadow: -5px 5px 20px 0px rgba($dark1, .2);

    &.devui-popover- {
      &success > .arrow {
        border-right-color: $status-green;
      }

      &error > .arrow {
        border-right-color: $status-red;
      }

      &warning > .arrow {
        border-right-color: $status-yellow;
      }

      &default > .arrow {
        border-right-color: $dropdown-overlay;
      }

      &info > .arrow {
        border-right-color: $status-blue;
      }
    }
  }

  &.devui-popover-success {
    background-color: $status-green;
    color: $white;
  }

  &.devui-popover-error {
    background-color: $status-red;
    color: $white;
  }

  &.devui-popover-info {
    background-color: $status-blue;
    color: $white;
  }

  &.devui-popover-default {
    background-color: $dropdown-overlay;
    color: $dark1;
  }

  &.devui-popover-warning {
    background-color: $status-yellow;
    color: $dark;
  }
}

.devui-popover-content {
  padding: 9px 14px;
}
